<template>
    <div class="home">
        <aside class="l_box">
            <sort/>
            <search/>
            <phone/>
            <recom/>
            <login/>
        </aside>
        <main class="r_box">
            <li v-for="(a,index) in Article" :key="index"><i><a href="/"><img :src="a.o_img"></a></i>
                <h3><a :href="'/info.html/' + a.id">{{a.title}}</a></h3>
                <p>{{a.content}}</p>
            </li>

            <page :total="total" @pageChange="pageChange"></page>

        </main>
    </div>
</template>

<script>
    // 引入特定的获取文章的方法
    import {getArticle} from "../service/getData";

    export default {
        name: 'home',
        data() {
            return {
                Article: [
                    {
                        "id": 3,
                        "a_url": 102,
                        "author": "hzh",
                        "changetime": 19/1/2019,
                        "content": "这里是修改后的内容",
                        "count_good": "1",
                        "count_view": "1",
                        "createtime": "19/1/2019",
                        "o_img": "D:/img/1.jpg",
                        "sort_id": "1",
                        "title": "第三内容"
                    },
                ],
                // 1.需要两个参数，总记录数，当前页，分页组件，通过总记录数算出总页数。
                // 2.触发翻页后，分页组件传参给父组件，参数和当前页绑定，并将当前页传给获取方法
                total: 20,
                currval: 1,
            }
        },
        methods: {
            getArticle: function () {
                getArticle(this.currval).then((res) => {
                    this.Article = res.data.content;
                    // 获取总页数
                    this.total = res.data.totalPages;
                });
            },
            // 页码切换，子组件，在这里触发，并传入分页的参数
            pageChange: function (item) {
                // 绑定当前页
                this.currval = item.pageCurrent;
                getArticle(this.currval).then((res) => {
                    this.Article = res.data.content;
                    // 获取总页数
                    this.total = res.data.totalPages;
                })
            },
        }, mounted() {
            this.getArticle();
        }
    }
</script>
